<template>
    <div id="item_list">
        <div class="container">
            <div class="group" v-for="(item, index) in itemList" :key="index">
                <div class="title">
                   <i class="el-icon-picture-outline-round"></i> {{ item.name }}
                </div>
                <div class="children"> 
                    <div class="child" v-for="(child, inx) in item.children" :key="inx" @click="routerTo(item.id, child.id)">
                        <el-link >{{ child.name }} </el-link> <span style="color: red;font-size:20px;margin-left:10px;" v-if="child.hot == 1" class="iconfont icon-HOT-copy"></span>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</template>

<script>
    // import items from "../../assets/js/items"
    export default {
       
        data() {
            return {
                itemList: [],
            }
        },
        mounted () {

        },
        created () {
            this.getItemList();
        },
        methods: {
            // 获取学历分类
            async getItemList() {
                let res = await this.$axios.post("/port/index/college", { key: this.$key })
                // console.log(res);
                this.itemList = res.data.data
            },
            // 跳转二级页面
            routerTo( sid, cid ) {
                this.$router.push(`/class/${sid}/${cid}`)
            },
        },
    }
</script>

<style lang="scss" scoped>
#item_list {
    width: 100%;
    margin:  10px auto;
    .container {
        width: 1200px;
        margin: 0 auto;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        display: flex;
        padding: 20px;
        box-sizing: border-box;
        .group {
            width: 232px;
            .title {
                border-bottom: 1px dashed #f2f2f2;
                width: 100%;
                height: 40px;
                line-height: 40px;
                font-size: 20px;
                color: #e3615d;
                font-weight: bold;
            }
            .children {
                font-size: 15px;
                .child {
                    line-height: 30px;
                    width: 100%;
                    display: flex;
                    align-items: center;
                }
            }
        }
    }
}
</style>